[overview] Port pane to CSS

https://bugzilla.gnome.org/show_bug.cgi?id=600734

diff --git a/data/Makefile.am b/data/Makefile.am
index 8c090c08f27d91ca8860b5666ed71cc867496c79..1f5857d773b5b8d9a302b1f38693d072a6a62795 100644 (file)
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -16,7 +16,6 @@ imagesdir = $(pkgdatadir)/images
 dist_images_DATA =                             \
        add-workspace.svg                       \
        app-well-glow.png                       \
-       close.svg                               \
        close-black.svg                         \
        info.svg                                \
        magnifier.svg                           \
@@ -25,6 +24,7 @@ dist_images_DATA =                            \
 themedir = $(pkgdatadir)/theme
 dist_theme_DATA =                              \
        theme/gnome-shell.css                   \
+       theme/close.svg                 \
        theme/scroll-button-down.png            \
        theme/scroll-button-down-hover.png      \
        theme/scroll-button-up.png              \

diff --git a/data/close.svg b/data/close.svg
deleted file mode 100644 (file)
index 0f40f49..0000000
--- a/data/close.svg
+++ /dev/null
@@ -1,74 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Foreground"
-   x="0px"
-   y="0px"
-   width="16px"
-   height="16px"
-   viewBox="0 0 16 16"
-   enable-background="new 0 0 16 16"
-   xml:space="preserve"
-   sodipodi:version="0.32"
-   inkscape:version="0.46"
-   sodipodi:docname="x_circle_16.svg"
-   inkscape:output_extension="org.inkscape.output.svg.inkscape"><metadata
-   id="metadata2399"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-   id="defs2397"><linearGradient
-     id="linearGradient3173"><stop
-       style="stop-color:#c4c4c4;stop-opacity:1;"
-       offset="0"
-       id="stop3175" /><stop
-       style="stop-color:#ffffff;stop-opacity:1;"
-       offset="1"
-       id="stop3177" /></linearGradient><inkscape:perspective
-     sodipodi:type="inkscape:persp3d"
-     inkscape:vp_x="0 : 8 : 1"
-     inkscape:vp_y="0 : 1000 : 0"
-     inkscape:vp_z="16 : 8 : 1"
-     inkscape:persp3d-origin="8 : 5.3333333 : 1"
-     id="perspective2401" /><linearGradient
-     inkscape:collect="always"
-     xlink:href="#linearGradient3173"
-     id="linearGradient3179"
-     x1="7.844358"
-     y1="16"
-     x2="7.7198443"
-     y2="-0.062256809"
-     gradientUnits="userSpaceOnUse" /></defs><sodipodi:namedview
-   inkscape:window-height="713"
-   inkscape:window-width="1197"
-   inkscape:pageshadow="2"
-   inkscape:pageopacity="0.0"
-   guidetolerance="10.0"
-   gridtolerance="10.0"
-   objecttolerance="10.0"
-   borderopacity="1.0"
-   bordercolor="#666666"
-   pagecolor="#ffffff"
-   id="base"
-   showgrid="false"
-   inkscape:zoom="32.125"
-   inkscape:cx="8"
-   inkscape:cy="8"
-   inkscape:window-x="40"
-   inkscape:window-y="40"
-   inkscape:current-layer="Foreground" />
-<path
-   fill-rule="evenodd"
-   clip-rule="evenodd"
-   d="M10.5,3.5l2,2L10,8l2.5,2.5l-2,2L8,10l-2.5,2.5l-2-2L6,8L3.5,5.5l2-2L8,6L10.5,3.5  z M0,8c0-4.418,3.582-8,8-8s8,3.582,8,8s-3.582,8-8,8S0,12.418,0,8z"
-   id="path2394"
-   style="fill-opacity:1;fill:url(#linearGradient3179)" />
-</svg>
\ No newline at end of file

diff --git a/data/theme/close.svg b/data/theme/close.svg
new file mode 100644 (file)
index 0000000..0f40f49
--- /dev/null
+++ b/data/theme/close.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Foreground"
+   x="0px"
+   y="0px"
+   width="16px"
+   height="16px"
+   viewBox="0 0 16 16"
+   enable-background="new 0 0 16 16"
+   xml:space="preserve"
+   sodipodi:version="0.32"
+   inkscape:version="0.46"
+   sodipodi:docname="x_circle_16.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"><metadata
+   id="metadata2399"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs2397"><linearGradient
+     id="linearGradient3173"><stop
+       style="stop-color:#c4c4c4;stop-opacity:1;"
+       offset="0"
+       id="stop3175" /><stop
+       style="stop-color:#ffffff;stop-opacity:1;"
+       offset="1"
+       id="stop3177" /></linearGradient><inkscape:perspective
+     sodipodi:type="inkscape:persp3d"
+     inkscape:vp_x="0 : 8 : 1"
+     inkscape:vp_y="0 : 1000 : 0"
+     inkscape:vp_z="16 : 8 : 1"
+     inkscape:persp3d-origin="8 : 5.3333333 : 1"
+     id="perspective2401" /><linearGradient
+     inkscape:collect="always"
+     xlink:href="#linearGradient3173"
+     id="linearGradient3179"
+     x1="7.844358"
+     y1="16"
+     x2="7.7198443"
+     y2="-0.062256809"
+     gradientUnits="userSpaceOnUse" /></defs><sodipodi:namedview
+   inkscape:window-height="713"
+   inkscape:window-width="1197"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   guidetolerance="10.0"
+   gridtolerance="10.0"
+   objecttolerance="10.0"
+   borderopacity="1.0"
+   bordercolor="#666666"
+   pagecolor="#ffffff"
+   id="base"
+   showgrid="false"
+   inkscape:zoom="32.125"
+   inkscape:cx="8"
+   inkscape:cy="8"
+   inkscape:window-x="40"
+   inkscape:window-y="40"
+   inkscape:current-layer="Foreground" />
+<path
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   d="M10.5,3.5l2,2L10,8l2.5,2.5l-2,2L8,10l-2.5,2.5l-2-2L6,8L3.5,5.5l2-2L8,6L10.5,3.5  z M0,8c0-4.418,3.582-8,8-8s8,3.582,8,8s-3.582,8-8,8S0,12.418,0,8z"
+   id="path2394"
+   style="fill-opacity:1;fill:url(#linearGradient3179)" />
+</svg>
\ No newline at end of file

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ec4cfa5731847c8c69b2d0f4668a52ecb57776ad..a1e49211b9142b7aef6c4233489be7423982321f 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -137,6 +137,19 @@ StTooltip {
     font-weight: normal;
 }
 
+.dash-pane {
+    background-color: rgba(0,0,0,0.95);
+    border: 1px solid #262626;
+    padding: 4px;
+    spacing: 4px;
+}
+
+.dash-pane-close {
+    background-image: url("close.svg");
+    width: 16px;
+    height: 16px;
+}
+
 /* LookingGlass */
 
 #LookingGlassDialog

diff --git a/js/ui/dash.js b/js/ui/dash.js
index 06cfd99108edd3c4e4f82ebf900a2dab009c8d9a..3a536ec3471f3454ee988c03f982d62530177443 100644 (file)
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -50,13 +50,6 @@ const SECTION_INNER_SPACING = 8;
 const BROWSE_ACTIVATED_BG = new Clutter.Color();
 BROWSE_ACTIVATED_BG.from_pixel(0x303030f0);
 
-const PANE_BORDER_COLOR = new Clutter.Color();
-PANE_BORDER_COLOR.from_pixel(0x101d3cfa);
-const PANE_BORDER_WIDTH = 2;
-
-const PANE_BACKGROUND_COLOR = new Clutter.Color();
-PANE_BACKGROUND_COLOR.from_pixel(0x000000f4);
-
 const APPS = "apps";
 const PREFS = "prefs";
 const DOCS = "docs";
@@ -95,36 +88,29 @@ Pane.prototype = {
     _init: function () {
         this._open = false;
 
-        this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                   background_color: PANE_BACKGROUND_COLOR,
-                                   border: PANE_BORDER_WIDTH,
-                                   border_color: PANE_BORDER_COLOR,
-                                   padding: DEFAULT_PADDING,
-                                   reactive: true });
+        this.actor = new St.BoxLayout({ style_class: "dash-pane",
+                                         vertical: true,
+                                         reactive: true });
         this.actor.connect('button-press-event', Lang.bind(this, function (a, e) {
             // Eat button press events so they don't go through and close the pane
             return true;
         }));
 
-        let chromeTop = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
-                                      spacing: 6 });
+        let chromeTop = new St.BoxLayout();
 
-        let closeIconUri = "file://" + global.imagedir + "close.svg";
-        let closeIcon = Shell.TextureCache.get_default().load_uri_sync(Shell.TextureCachePolicy.FOREVER,
-                                                                       closeIconUri,
-                                                                       16,
-                                                                       16);
+        let closeIcon = new St.Bin({ style_class: "dash-pane-close" });
         closeIcon.reactive = true;
         closeIcon.connect('button-press-event', Lang.bind(this, function (b, e) {
             this.close();
             return true;
         }));
-        chromeTop.append(closeIcon, Big.BoxPackFlags.END);
-        this.actor.append(chromeTop, Big.BoxPackFlags.NONE);
+        let dummy = new St.Bin();
+        chromeTop.add(dummy, { expand: true });
+        chromeTop.add(closeIcon, { x_align: St.Align.END });
+        this.actor.add(chromeTop);
 
-        this.content = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                     spacing: DEFAULT_PADDING });
-        this.actor.append(this.content, Big.BoxPackFlags.EXPAND);
+        this.content = new St.BoxLayout({ vertical: true });
+        this.actor.add(this.content, { expand: true });
 
         // Hidden by default
         this.actor.hide();
@@ -200,7 +186,7 @@ function createPaneForDetails(dash, display) {
         if (index >= 0) {
             detailPane.destroyContent();
             let details = display.createDetailsForIndex(index);
-            detailPane.content.append(details, Big.BoxPackFlags.EXPAND);
+            detailPane.content.add(details, { expand: true });
             detailPane.open();
         } else {
             detailPane.close();
@@ -228,7 +214,7 @@ ResultPane.prototype = {
 
         createPaneForDetails(this._dash, resultArea.display);
 
-        this.content.append(resultArea.actor, Big.BoxPackFlags.EXPAND);
+        this.content.add(resultArea.actor, { expand: true });
         this.connect('open-state-changed', Lang.bind(this, function(pane, isOpen) {
             resultArea.display.resetState();
         }));